<template>
	<view class="article-item ">
    <view class="item">
			<!-- 标题和封面图部分 -->
			<view class="content row">
			  <!-- 左侧标题和部分内容区 -->
			  <view class="left-text">
			    <text class="text-ellipsis">这是标题啊</text>
			    <view class="text-ellipsis small-font">这是好多好多好多的呢日用去带饭记录试卷删了离开就是看来金盾股份</view>
			  </view>
			  <!-- 右侧图片区 -->
			  <view class="right-img">
			    <image src="/static/images/111.jpg"></image>
			  </view>
			</view>
			<!-- 作者 时间 点赞部分 -->
			<view class="info row">
				<text class="small-font">张三</text>
				<text class="small-font">2021年09月27日</text>
				<text class="small-font">42343 赞</text>
			</view>
		</view>
		<view class="item">
			<!-- 标题和封面图部分 -->
			<view class="content row">
			  <!-- 左侧标题和部分内容区 -->
			  <view class="left-text">
			    <text class="text-ellipsis">这是标题啊</text>
			    <view class="text-ellipsis small-font">这是好多好多好多的呢日用去带饭记录试卷删了离开就是看来金盾股份</view>
			  </view>
			  <!-- 右侧图片区 -->
			  <!-- <view class="right-img">
			    <image src="/static/images/111.jpg"></image>
			  </view> -->
			</view>
			<!-- 作者 时间 点赞部分 -->
			<view class="info row">
				<text class="small-font">张三</text>
				<text class="small-font">2021年09月27日</text>
				<text class="small-font">42343 赞</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"article-item",
    props: {
      isCoverImg: {
        type: Boolean,
        default: false
      }
    },
		data() {
			return {
				
			}
		}
	}
</script>

<style lang="scss">
 .text-ellipsis {
   overflow: hidden;
	 text-overflow: ellipsis;
	 -webkit-line-clamp: 2;
	 display: -webkit-box;
	 -webkit-box-orient: vertical;
	 white-space: normal;
 }
 .small-font {
	 font-size: 24rpx;
	 color: #999;
 }
 .item {
	 padding: 20rpx 0;
	 border-bottom: 1rpx solid #ccc;
 }
.article-item  {
	flex-direction: column;
	justify-content: space-between;
  .content {
    justify-content: space-between;
		height: 140rpx;
    .left-text {
      text {
				font-size: 35rpx;
				font-weight: 600;
				
			}
			view {
				padding-top: 10rpx;
				text-indent:1em;
			}
    }
    .right-img {
      min-width: 220rpx;
      image {
        width: 100%;
        height: 140rpx;
        border-radius: 10rpx;
      }
    }
  }
	.info {
		text {
			padding-right: 20rpx;
			&:first-child {
				color: #000;
			}
		}
	}
}
</style>
